import React from 'react'
import ReactDOM from 'react-dom'

// 列表渲染， 调用组件， 向组件传参

function ListItem(props) {
  // 不用下面这种
  let eventFn = function(params) {
    //...
  }
  return (
    <li key={props.index}>
      <h3>{props.data.title}</h3>
      <p>{props.data.content}</p>
    </li>
  )
}

class ListItem2 extends React.Component {
  render() {
    return (
      // 下面的这个key无效 需要在调用的位置添加key
      <li key={this.props.index} onClick={(e) => this.clickEvent(1, 2, e)}>
      {/* // <li onClick={(e) =>this.clickEvent(this.props.index, this.props.data, e)}> */}
        <h3>{this.props.data.title}</h3>
        <p>{this.props.data.content}</p>
      </li>
    )
  }
  clickEvent (index, data, e) {
    console.log(index + 1)
    console.log(data.content)
    console.log(e.target)
  }
}

class Welcome extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          title: 'xiong',
          content: 'feng'
        },
        {
          title: 'xiong',
          content: 'nanpu'
        },
        {
          title: 'xiong',
          content: 'xiaogege'
        }
      ]
    }
  }
  render() {
    // map返回值为一个数组
    const listArr = this.state.list.map((item, index) => {
      return (
        <ListItem2 key={index} data={item} index={index}/>
      )
    })
    return (
      <div>
        <h1>zoo</h1>
        <ul>{listArr}</ul>
        {/* <ul>
          {this.state.list.map((item, index) => {
            return (
              <li key={index} onClick={this.clickFn}>
                <h3>{item.title}</h3>
                <p>{item.content}</p>
              </li>
            )
          })}
        </ul> */}
      </div>
    )
  }
  clickFn = (e) => {
    console.log(e.target)
  }
}

ReactDOM.render(<Welcome/>, document.getElementById('root'))
